<!-- 考试培训详情 -->
<template>
	<view class="study-container">
		<view class="user-card-container">
			<!-- 主卡片 -->
			<view class="user-card">
				<!-- 用户信息 -->
				<!-- 课程名称 -->
				<view class="course-list">
					<view class="course-item" v-for="(course, index) in courseList" :key="index">
						<view class="course-left">
							<u-image :src="course.bkz_logo_uri[0].url" width="220rpx" height="240rpx" mode="aspectFill" radius="4"></u-image>
						</view>
						<view class="course-right">
							<text class="course-name">{{ course.bkz_name }}</text>
							<text class="course-level">可报名等级：{{ course.bkz_levelnames }}</text>
							<text class="course-teacher">报名截止时间：{{ course.bkz_bmenddate }}</text>
							<text class="course-count">报名城市：{{ course.bkz_bkcs }}</text>
							<text class="course-price">报名费用：¥{{ course.bkz_percentprice }}起/人</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 第二部分 -->
		<view class="floating-stats">
			<view class="course-tabs">
				<u-tabs :list="tabs" :current="currentTab" @change="changeTab" activeColor="#03B8CD" inactiveColor="#606266"
					barWidth="80"  item-width="50%" bg-color="#F1F7F7"></u-tabs>
			</view>
			<!-- 介绍 -->
			<view v-if="currentTab === 0" class="teacher-section">
				<view class="teacher-explain">
					<view class="teacher-content">
						<text class="teacher-text">{{ courseInfo.introduction }}</text>
					</view>
					<view class="teacher-img">
						<u-image v-if="courseInfo.introImage" :src="courseInfo.introImage" width="100%" height="300rpx"
							mode="widthFix" radius="8" class="teacher-image"></u-image>
					</view>
				</view>
			</view>

			<!-- 优惠政策-->
			<view class="teacher-section" v-if="currentTab === 1">
				<view class="teacher-explain">
					<view class="teacher-content">
						<text class="teacher-text">{{ courseInfo.introduction }}</text>
					</view>
					<view class="teacher-img">
						<u-image v-if="courseInfo.introImage" :src="courseInfo.introImage" width="100%" height="300rpx"
							mode="widthFix" radius="8" class="teacher-image"></u-image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="action-bar">
			<u-button type="default" shape="circle" @click="buyCourse" plan hair-line :customStyle="customStyle" class="buy-btn">
				客服助理
			</u-button>
<!-- 			<u-button type="default" shape="circle" @click="buyCourse" :customStyle="customStyle" class="buy-btn">
				分享赚积分
			</u-button> -->
			<u-button type="default" shape="circle" @click="teamRegister" :customStyle="customStyleBm" class="buy-btn-main">
				团队报名
			</u-button>
		</view>
	</view>
</template>

<script>
import { nextTick } from "vue"

	export default {
		data() {
			return {
				courseList: [{
						id: 1,
						cover: '/static/course1.jpg',
						name: '前端开发高级课程',
						level: '一级、二级、三级、四级',
						expirDate: '6月20日 00:00',
						lessonCount: 45,
						price: '80.00',
						city: '福州',
						purchased: false
					}],
				currentTab: 0,
				tabs: [{
						name: '介绍'
					},
					{
						name: '优惠政策'
					}
				],
				stats: [{
						value: 24,
						label: '积分'
					},
					{
						value: 15,
						label: '粉丝'
					},
					{
						value: 8,
						label: '关注'
					},
					{
						value: 10,
						label: '消息'
					}
				],
				teachers: [{
						cover: '/static/course1.jpg',
						name: '张老师',
						title: '高级前端工程师',
						experience: 8,
						rating: 3.4,
						skills: ['前端架构', '性能优化', 'Vue.js', 'React.js']
					},
					{
						cover: '/static/course1.jpg',
						name: '李老师',
						title: '全栈工程师',
						experience: 5,
						rating: 3.4,
						skills: ['Node.js', 'TypeScript', '前端工程化']
					},
					{
						cover: '/static/course1.jpg',
						name: '王老师',
						title: 'UI设计师',
						experience: 6,
						rating: 4.2,
						skills: ['UI设计', '交互设计', '用户体验']
					}
				],
				courseInfo: {
					introduction: '图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文介绍图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文',
					introImage: '/static/course-intro.jpg',
					price: '10.8'
				},
				tdyhzcInfo: {
					introduction: '图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文介绍图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文',
					introImage: '/static/course-intro.jpg',
					price: '10.8'
				},
				customStyle: {
					// "backgroundColor": "#D5D5D5",
					// "border": "#03B8CD",
					"color":"#03B8CD"
				},
				customStyleBm: {
					"backgroundColor": "#03B8CD",
					"color":"#fff"
				},
				// 讲师介绍
				// 实际开发中这里应该是从API获取的数据
				chapters: [{
						id: 1,
						name: "章节名称 (5)",
						status: "completed",
						lessons: [{
							name: "第一课 基础入门",
							duration: "30分钟22秒",
							status: "completed"
						}]
					},
					{
						id: 2,
						name: "章节名称 (5)",
						status: "unlocked",
						lessons: [{
							name: "第二课 进阶知识",
							duration: "30分钟22秒",
							status: "unlocked"
						}]
					},
					{
						id: 3,
						name: "章节名称 (5)",
						status: "in-progress",
						lessons: [{
							name: "第三课 实战演练",
							duration: "30分钟22秒",
							status: "in-progress",
							progress: 10
						}]
					},
					{
						id: 4,
						name: "章节名称 (5)",
						status: "locked",
						lessons: [{
							name: "第四课 高级技巧",
							duration: "30分钟22秒",
							status: "locked"
						}]
					}
				],
				kaoZhengCode: '',
			}
		},
		onLoad(options) {
			this.kaoZhengCode = options.code
			console.log('code:', this.kaoZhengCode)
		},
		onShow() {
			this.$u.api.querykz({
				bkzcode: this.kaoZhengCode
			}).then(res => {
				console.log('报名后：',res)
				this.courseList = []
				this.courseList.push(res.data.base_info)
				this.courseInfo.introduction = this.courseList[0].bkz_djsbtj_desc
				this.tdyhzcInfo.introduction = this.courseList[0].bkz_tdyhzc_desc
			
			})
		},
		methods: {
			changeTab(index) {
				this.currentTab = index;
			},
			// 团队报名
			teamRegister() {
				uni.navigateTo({
					url: `/pages/Institution/examTrain/teamRegister?code=${this.kaoZhengCode}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.study-container {
		background-color: #516178;
	}

	/* 外层容器 */
	.user-card-container {
		position: relative;
		padding-bottom: 60rpx;
		/* 为浮动统计留出空间 */
		background-color: #516178;
		height: 235px;
		top: 10px;

	}

	/* 主卡片样式 */
	.user-card {
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		color: #ffffff;

	}

	// 课程名称
	.course-list {
		border-radius: 8rpx;
		overflow: hidden;
	}

	.course-item {
		display: flex;
		padding: 20rpx;
		// border-bottom: 1rpx solid #eee;
	}

	.course-left {
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.course-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.course-level,
	.course-teacher {
		font-size: 24rpx;
		color: #ffffff;
		margin-bottom: 8rpx;
	}

	.course-footer {
		display: flex;
		// justify-content: space-between;
		margin-top: 10rpx;

		.course-count {
			font-size: 24rpx;
			color: #ffffff;
			margin-right: 10px;
		}

		.course-price {
			font-size: 28rpx;
			color: #ffffff;
			font-weight: bold;
		}
	}

	/* 浮动统计行样式,内容 */
	.floating-stats {
		position: absolute;
		top: 180px;
		left: 0rpx;
		right: 0rpx;
		// height: 80%;
		background: #F1F7F7;
		border-radius: 40rpx 40rpx 0 0;

		.course-tabs {
			position: static;
			margin: 10px;
			left: 0rpx;
			right: 0rpx;
			border-radius: 40rpx 40rpx 0 0;
			background-color: #f0f0f0;
		}

		// 讲师内容
		.teacher-section {
			padding: 10rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			// margin: 5px;
		}	
	}

	.teacher-explain {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		// margin-bottom: 20rpx;

		.teacher-content {
			font-size: 32rpx;
			margin-bottom: 10px;
		}
	}

	// 底部
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #F1F7F7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 100;

		.buy-btn {
			width: 200rpx;
			height: 80rpx;
		}
		.buy-btn-main {
			width: 350rpx;
			height: 80rpx;
		}

	}
</style>